// 阶段3

import React, { useEffect } from 'react';
import { Form, Row, Col, Input, DatePicker, Button } from 'antd';
import { observer, useLocalStore } from 'mobx-react-lite';
import '../index.local.sass';
import { FileUploader } from '~/components/FileUploader';
import { genValidConfig } from '~/pages/project/new/pageConfig';
import { EvalutionTable } from './EvalutionTable';

const formItemLayout = {
  wrapperCol: { span: 20 },
};
const { TextArea } = Input;

interface Props {
  tableData: {
    prData?: Array<any>
    frData?: Array<any>
    mrData?: Array<any>
    saData?: Array<any>
  }
  getData: (prData: any, frData: any, mrData: any, saData: any) => void
}

export const StageThree = observer((props: Props) => {
  const { getData, tableData } = props;
  const prData = tableData.prData ?? [];
  const frData = tableData.frData ?? [];
  const mrData = tableData.mrData ?? [];
  const saData = tableData.saData ?? [];

  const state = useLocalStore(() => ({
    PMRTableData: [] as any,
    FRTableData: [] as any,
    MERTableData: [] as any,
    SATableData: [] as any,
  }));

  // assessment 新增一行
  const addProjectOperation = (type: string) => {
    const newData: any = {
      number: 1,
      createTime: '',
      fileUrl: '',
      hasFile: false,
    };

    if (type === 'pcPmr') {
      // state.VFMTableData.push(newData); 未触发渲染
      // 深拷贝  触发渲染
      state.PMRTableData = [...state.PMRTableData, newData];
    } else if (type === 'pcFr') {
      state.FRTableData = [...state.FRTableData, newData];
    } else if (type === 'mer') {
      state.MERTableData = [...state.MERTableData, newData];
    } else if (type === 'pppSa') {
      state.SATableData = [...state.SATableData, newData];
    }

    getData?.(state.PMRTableData, state.FRTableData, state.MERTableData, state.SATableData);
  };

  // assessment 删除一行
  const deleteProjectOperation = (type: string, index: number) => {
    if (type === 'pcPmr') {
      // delete state.VFMTableData[index];
      state.PMRTableData.splice(index, 1);
      state.PMRTableData = [...state.PMRTableData];
    } else if (type === 'pcFr') {
      state.FRTableData.splice(index, 1);
      state.FRTableData = [...state.FRTableData];
    } else if (type === 'mer') {
      state.MERTableData.splice(index, 1);
      state.MERTableData = [...state.MERTableData];
    } else if (type === 'pppSa') {
      state.SATableData.splice(index, 1);
      state.SATableData = [...state.SATableData];
    }

    getData?.(state.PMRTableData, state.FRTableData, state.MERTableData, state.SATableData);
  };

  // assessment 上传附件
  const uploadProjectOperation = (fileUrl: string, type: string, index: any) => {
    if (type === 'pcPmr') {
      state.PMRTableData[index] = { ...state.PMRTableData[index], createTime: new Date().getTime(), fileUrl };
      state.PMRTableData = [...state.PMRTableData];
    } else if (type === 'pcFr') {
      state.FRTableData[index] = { ...state.FRTableData[index], createTime: new Date().getTime(), fileUrl };
      state.FRTableData = [...state.FRTableData];
    } else if (type === 'mer') {
      state.MERTableData[index] = { ...state.MERTableData[index], createTime: new Date().getTime(), fileUrl };
      state.MERTableData = [...state.MERTableData];
    } else if (type === 'pppSa') {
      state.SATableData[index] = { ...state.SATableData[index], createTime: new Date().getTime(), fileUrl };
      state.SATableData = [...state.SATableData];
    }

    getData?.(state.PMRTableData, state.FRTableData, state.MERTableData, state.SATableData);
  };

  const fileUploadOptions = {
    accept: 'application/zip,application/vnd.rar,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf',
    max: 1,
  };

  useEffect(() => {
    state.PMRTableData = [...prData];
    state.FRTableData = [...frData];
    state.MERTableData = [...mrData];
    state.SATableData = [...saData];
  }, [prData, frData, mrData, saData]);

  return (
    <div className="stage3">

      <h3><i></i>Key Project Company Information</h3>

      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Project company name'}
            name="companyName"
            rules={genValidConfig('Procurement documents')}
            {...formItemLayout}
          >
            <Input placeholder="Please input"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Project company found date'}
            name="pcFoundDate"
            rules={genValidConfig('Project company found date')}
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Select Time"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Project company registered capital'}
            name="pcRegisteredCapital"
            rules={genValidConfig({ selfType: 'numString', required: 'false' })}
            {...formItemLayout}
          >
            <Input placeholder="Please input" prefix="$"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <Form.Item label={'Project company shareholding structure'}
            name="pcShareholdingStructure"
            rules={[
              {
                required: true,
                message: 'Please enter company Project company shareholding structure',
              },
            ]}
          >
            <TextArea
              rows={4}
              placeholder="Please enter company Project company shareholding structure"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Project company shareholders pay project capital'}
            name="pcShareholdersPayProjectCapital"
            rules={genValidConfig({ selfType: 'numString', required: 'false' })}
            {...formItemLayout}
          >
            <Input placeholder="Please input" prefix="$"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'Performance assurance measures'}
              name="performanceAssuranceMeasures"
              {...formItemLayout}
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
      </Row>

      <h3><i></i>Project Design and Construction</h3>

      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Project construction start date'}
            name="constructionStartDate"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Select Time"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Project construction completion date'}
            name="constructionCompletionDate"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Select Time"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <Form.Item label={'Project construction progress'}
            name="constructionProgress"
            rules={[
              {
                required: true,
                message: 'Please provide project construction progress',
              },
            ]}
          >
            <TextArea
              rows={4}
              placeholder="Please provide project construction progress"/>
          </Form.Item>
        </Col>
      </Row>

      <h3><i></i>Project Operations</h3>

      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Project operation start date'}
            name="operationStartDate"
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Select Time"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Actual expenditure of financial expenditure by government each year'}
            name="govExpenditureEachYear"
            rules={genValidConfig({ selfType: 'numString', required: 'false' })}
            {...formItemLayout}
          >
            <Input placeholder="Please input" prefix="$"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <div>Project company performance monitoring report</div>
          <Button onClick={() => addProjectOperation('pcPmr')} type="primary" className="mb-2">Add a row</Button>
          <Form.Item name="pcPmr">
            <EvalutionTable
              type={'pcPmr'}
              data={state.PMRTableData}
              deleteItem={deleteProjectOperation}
              UploadItem={uploadProjectOperation}
            />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <div>Project company financial report</div>
          <Button onClick={() => addProjectOperation('pcFr')} type="primary" className="mb-2">Add a row</Button>
          <Form.Item name="pcFr">
            <EvalutionTable
              type={'pcFr'}
              data={state.FRTableData}
              deleteItem={deleteProjectOperation}
              UploadItem={uploadProjectOperation}
            />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <div><span className="require-icon">*</span>Mid-term evaluation report</div>
          <Button onClick={() => addProjectOperation('mer')} type="primary" className="mb-2">Add a row</Button>
          <Form.Item name="mer">
            <EvalutionTable
              type={'mer'}
              data={state.MERTableData}
              deleteItem={deleteProjectOperation}
              UploadItem={uploadProjectOperation}
            />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <div>PPP contract amendment agreement or supplementary agreement</div>
          <Button onClick={() => addProjectOperation('pppSa')} type="primary" className="mb-2">Add a row</Button>
          <Form.Item name="pppSa">
            <EvalutionTable
              type={'pppSa'}
              data={state.SATableData}
              deleteItem={deleteProjectOperation}
              UploadItem={uploadProjectOperation}
            />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <Form.Item label={'Major changes or terminations of the project'}
            name="majorChangesTerminations"
            rules={[
              {
                required: true,
                message: 'Please proivde detail of cardinal change or termination',
              },
            ]}
          >
            <TextArea
              rows={4}
              placeholder="Please proivde detail of cardinal change or termination"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <Form.Item
            label={'The situation of major breach of contract and performance guarantee, and the handling of public complaints'}
            name="badEventHandling"
          >
            <TextArea
              rows={4}
              placeholder="Please provide the situation of major breach of contract and performance guarantee, and the handling of public complaints"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <Form.Item
            label={'Provisions, decisions, etc. that may be of significant impact on the project by the government'}
            name="significantImpactOnGovernment"
          >
            <TextArea
              rows={4}
              placeholder="Please provide Provisions, decisions, etc. that may be of significant impact on the project by the government"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <Form.Item label={'Major disputes, complaints of the project company of relevant parties'}
            name="pcMajorDisputesComplaints">
            <TextArea
              rows={4}
              placeholder="Please provide major disputes, complaints of the project company of relevant parties"/>
          </Form.Item>
        </Col>
      </Row>
    </div>
  );
});
